<template>
	<!-- 普通用户 -->
	<el-card shadow="hover">
		<el-form :model="queryParams" ref="queryFormRef" :inline="true" v-show="showSearch">
			<el-form-item label="昵称" prop="nickname">
				<el-input v-model="queryParams.nickname" placeholder="请输入昵称" clearable />
			</el-form-item>
			<el-form-item label="手机号" prop="mobile">
				<el-input v-model="queryParams.mobile" placeholder="请输入手机号" clearable />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" @click="onQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" @click="onResetQuery">重置</el-button>
			</el-form-item>
		</el-form>
		<el-row :gutter="10" class="top-block mb8">
			<!-- <el-col :span="1.5">
				<el-button @click="onDemoteToNormalUser" type="primary" :disabled="single" plain icon="el-icon-bottom">降级成普通用户</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button @click="onResetMerchants(1)" type="success" :disabled="single" plain icon="el-icon-edit">重置商户号（旧）</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button @click="onResetMerchants(2)" type="success" :disabled="single" plain icon="el-icon-edit">重置商户号（新）</el-button>
			</el-col> -->
			<!-- <el-col :span="1.5">
				<el-button @click="onUserExport" type="warning" plain>导出</el-button>
			</el-col> -->
			<el-col :span="1.5">
				<el-button @click="onBulkRecharge" type="primary" plain>批量充值</el-button>
			</el-col>
			<right-toolbar v-model:showSearch="showSearch" @queryTable="getList" />
		</el-row>
		<el-table :data="tableList" v-loading="loading" @selection-change="onSelectionChange">
			<el-table-column label="用户ID" align="center" prop="id" />
			<el-table-column label="用户头像" align="center" prop="avatar">
				<template #default="scope">
					<el-image v-if="scope.row.avatar" :src="scope.row.avatar" fit="scale-down" style="width: 60px; height: 60px" />
					<span v-else>----</span>
				</template>
			</el-table-column>
			<el-table-column label="用户昵称" align="center" prop="nickname" />
			<el-table-column label="手机号" align="center" prop="mobile" />
			<el-table-column label="邀请码" align="center" prop="invite_code" />
			<el-table-column label="注册时间" align="center">
				<template #default="scope">{{ timeDictionary(scope.row.create_time) }}</template>
			</el-table-column>
			<el-table-column label="升级时间" align="center">
				<template #default="scope">{{ timeDictionary(scope.row.agent_time) }}</template>
			</el-table-column>
			<el-table-column label="所属物业经理" align="center" prop="user_manager_name" />
			<!-- <el-table-column label="所属物业单位" align="center" prop="property_title" /> -->
			<el-table-column label="操作" align="center" fixed="right">
				<template #default="{ row }">
					<el-button @click="onRechargeRecord(row)" type="text">充值记录</el-button>
					<el-button @click="onBalanceRecharge(row)" type="text">余额充值</el-button>
					<el-button @click="onDemoteToNormalUser(row)" type="text">降级成普通用户</el-button>
				</template>
			</el-table-column>
		</el-table>
		<pagination-component
			v-show="total > 0"
			:total="total"
			v-model:page="queryParams.pageNum"
			v-model:limit="queryParams.pageSize"
			@pagination="getList"
		/>
		<balanceRechargeDialog ref="balanceRechargeDialogRef" />
		<rechargeRecordDialog ref="rechargeRecordDialogRef" />
		<bulkRechargeDialog ref="bulkRechargeDialogRef" />
	</el-card>
</template>

<script lang="ts">
import { onMounted, reactive, ref, toRefs, h } from 'vue';
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus';
import { usersMchidReset } from '/@/api/admin1';
import { usersAgentDemotion, usersAgentList, usersExport } from '/@/api/admin';
import { timeDictionary } from '/@/utils/dictionaryTranslation';

import balanceRechargeDialog from '../averageUser/dialog/balanceRechargeDialog.vue';
import rechargeRecordDialog from '../averageUser/dialog/rechargeRecordDialog.vue';
import bulkRechargeDialog from '../averageUser/dialog/bulkRechargeDialog.vue';
import { handleDownloadByName } from '/@/utils/utils';

export default {
	name: 'propertyHousekeeper',
	components: { balanceRechargeDialog, rechargeRecordDialog, bulkRechargeDialog },
	setup() {
		const queryFormRef = ref(null);
		const loadingExportRef = ref(null);
		const upgradeRef = ref(null);
		const balanceRechargeDialogRef = ref(null);
		const rechargeRecordDialogRef = ref(null);
		const bulkRechargeDialogRef = ref(null);
		const state = reactive({
			queryParams: {
				nickname: '',
				mobile: '',
				identity: 2,
				pageNum: 1,
				pageSize: 10,
			},
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			// 选中数组
			ids: [],
			showSearch: true,
			tableList: [],
			loading: false,
			total: 0,
		});

		let selectionInfo: Array<any> = []; // 被选择的数据项

		onMounted(() => {
			getList();
		});

		/********** 点击事件(on开头) **********/
		// 导出用户
		const onUserExport = () => {
			(loadingExportRef.value as any) = ElLoading.service({
				lock: true,
				text: '正在导出，请耐心等待...',
				background: 'rgba(0, 0, 0, 0.7)',
			});
			_usersExport(state.queryParams);
		};
		// 余额充值
		const onBalanceRecharge = (row: any) => {
			(balanceRechargeDialogRef.value as any)?.openDialog({ row }, () => getList());
		};
		// 充值记录
		const onRechargeRecord = (row: any) => {
			(rechargeRecordDialogRef.value as any)?.openDialog({ row });
		};
		// 批量充值
		const onBulkRecharge = () => {
			(bulkRechargeDialogRef.value as any)?.openDialog({}, () => getList());
		};
		// 降级成为普通用户
		const onDemoteToNormalUser = (row: any) => {
			ElMessageBox({
				title: '提示',
				message: h('p', null, [
					h('span', null, `是否确认降级用户编号为${row.id}成为普通用户吗？`),
					h('p', { style: 'color: red' }, '物业管家降级后，物业管家的粉丝会转移到物业管家对应的物业经理下面'),
				]),
				showCancelButton: true,
			})
				.then(() => {
					_usersAgentDemotion({ user_id: row.id });
				})
				.catch(() => {});
		};
		// 搜索
		const onQuery = () => {
			state.queryParams.pageNum = 1;
			getList();
		};
		// 重置
		const onResetQuery = () => {
			(queryFormRef.value as any)?.resetFields();
			onQuery();
		};
		// 重置商户号
		const onResetMerchants = (type: any) => {
			ElMessageBox.confirm(`是否确认重置用户编号为${selectionInfo[0].user_id}的商户号？`, '提示', { type: 'warning' })
				.then(() => {
					return usersMchidReset({ user_id: selectionInfo[0].user_id, type });
				})
				.then(() => {
					ElMessage.success('重置成功');
				})
				.catch(() => {});
		};
		// 多选框选中数据
		const onSelectionChange = (selection: any) => {
			selectionInfo = selection;
			state.single = selection.length !== 1;
			state.multiple = !selection.length;
		};

		/********** 方法事件 **********/
		const getList = () => {
			state.loading = true;
			_usersAgentList(state.queryParams);
		};

		/********** 网络请求 **********/
		//普通用户列表
		const _usersAgentList = (_data: object) => {
			usersAgentList(_data)
				.then((res: any) => {
					console.log(res);
					state.tableList = res.data.list;
					state.total = res.data.total;
					state.loading = false;
				})
				.catch(() => {
					state.loading = false;
				});
		};
		//物业管家降级为普通用户
		const _usersAgentDemotion = (_data: object = {}) => {
			usersAgentDemotion(_data).then(() => {
				ElMessage.success('操作成功');
				getList();
			});
		};
		// 导出用户
		const _usersExport = (_data: object) => {
			usersExport(_data)
				.then((res: any) => {
					handleDownloadByName(res.data.info.url, '普通用户导出', false);
					(loadingExportRef.value as any)?.close();
				})
				.catch(() => {
					(loadingExportRef.value as any)?.close();
				});
		};

		return {
			queryFormRef,
			upgradeRef,
			balanceRechargeDialogRef,
			rechargeRecordDialogRef,
			bulkRechargeDialogRef,
			onUserExport,
			onRechargeRecord,
			onBalanceRecharge,
			onBulkRecharge,
			onQuery,
			onResetQuery,
			onDemoteToNormalUser,
			onResetMerchants,
			onSelectionChange,
			getList,
			timeDictionary,
			...toRefs(state),
		};
	},
};
</script>

<style lang="scss" scoped></style>
